<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>最简单的Tailwind测试</title>
  <!-- 直接使用CDN版本的Tailwind -->
  <script src="https://cdn.tailwindcss.com"></script>
  
  <!-- 配置自定义颜色 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            success: '#52C41A',
            primary: '#165DFF',
            secondary: '#36CFC9',
            warning: '#FAAD14',
            danger: '#FF4D4F',
          },
        },
      }
    }
  </script>
</head>
<body class="bg-gray-900 text-white min-h-screen p-8">
  <h1 class="text-3xl font-bold mb-8">最简单的Tailwind CSS测试</h1>
  
  <!-- 测试基础颜色类 -->
  <div class="mb-8">
    <h2 class="text-xl font-semibold mb-4">基础颜色类：</h2>
    <div class="grid grid-cols-5 gap-4">
      <div class="w-20 h-20 bg-blue-500 rounded-lg flex items-center justify-center">蓝色</div>
      <div class="w-20 h-20 bg-green-500 rounded-lg flex items-center justify-center">绿色</div>
      <div class="w-20 h-20 bg-red-500 rounded-lg flex items-center justify-center">红色</div>
      <div class="w-20 h-20 bg-yellow-500 rounded-lg flex items-center justify-center">黄色</div>
      <div class="w-20 h-20 bg-purple-500 rounded-lg flex items-center justify-center">紫色</div>
    </div>
  </div>
  
  <!-- 测试自定义颜色类 -->
  <div>
    <h2 class="text-xl font-semibold mb-4">自定义颜色类：</h2>
    <div class="grid grid-cols-5 gap-4">
      <div class="w-20 h-20 bg-primary rounded-lg flex items-center justify-center">主色</div>
      <div class="w-20 h-20 bg-success rounded-lg flex items-center justify-center">成功</div>
      <div class="w-20 h-20 bg-warning rounded-lg flex items-center justify-center">警告</div>
      <div class="w-20 h-20 bg-danger rounded-lg flex items-center justify-center">危险</div>
      <div class="w-20 h-20 bg-secondary rounded-lg flex items-center justify-center">辅色</div>
    </div>
  </div>
  
  <div class="mt-8">
    <p class="text-gray-400">如果所有颜色方块都能正常显示，则Tailwind CSS工作正常。</p>
  </div>
</body>
</html>